"use client";

import { useSearchParams } from "next/navigation";
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/table";
import { EditLove } from "./EditLove";
import { DeleteLove } from "./DeleteLove";

type BookListProps = {
  books: any[];
  total: number;
}

export const LoveList = ({ books, total }: BookListProps) => {
  const searchParams = useSearchParams()

  return (
    <Table className="bg-white border rounded-lg mt-4">
        <TableCaption>《爱自己的100种方式卡牌》是一种结合心理疗愈、自我关怀与趣味互动的创意工具，通常以一套实体或数字卡牌的形式呈现，旨在通过轻松有趣的方式帮助人们学会关爱自己、提升幸福感。</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[100px]">id</TableHead>
            <TableHead>内容</TableHead>
            <TableHead>备注</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {books.map((invoice) => (
            <TableRow key={invoice.id}>
              <TableCell className="font-medium">{invoice.id}</TableCell>
              <TableCell>{invoice.name}</TableCell>
              <TableCell>
                <div className='flex items-center'>
                  <EditLove type='edit' item={invoice} />
                  <DeleteLove item={invoice} />
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={1}>总数：{total}</TableCell>
            <TableCell colSpan={3}>
             
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
      
  );
} 